<template>
  <div class="star-background-container">
    <canvas ref="canvas" :width="width" :height="height"></canvas>
  </div>
</template>

<script>
export default {
  name: 'StarBackground',
  props: {
    starCount: { type: Number, default: 300 },      // 星星数量
    meteorCount: { type: Number, default: 3 },      // 流星数量
    speed: { type: Number, default: 0.15 },         // 移动速度
    twinkleSpeed: { type: Number, default: 0.05 },  // 闪烁速度
    starSizeRange: { type: Array, default: () => [0.5, 3] } // 星星大小范围
  },
  data() {
    return {
      width: window.innerWidth,
      height: window.innerHeight,
      stars: [],
      meteors: [],
      ctx: null,
      animationFrame: null,
      gradient: null
    }
  },
  mounted() {
    this.initCanvas()
    this.createStars()
    this.createMeteors()
    this.animate()
    window.addEventListener('resize', this.handleResize)
  },
  beforeUnmount() {
    cancelAnimationFrame(this.animationFrame)
    window.removeEventListener('resize', this.handleResize)
  },
  methods: {
    initCanvas() {
      this.canvas = this.$refs.canvas
      if (!this.canvas) return; // 防止空指针
      this.ctx = this.canvas.getContext('2d')
      
      // 创建深空渐变背景
      this.gradient = this.ctx.createLinearGradient(0, 0, 0, this.height)
      this.gradient.addColorStop(0, '#0a0a20')
      this.gradient.addColorStop(0.5, '#0a0a12')
      this.gradient.addColorStop(1, '#000000')
    },
    
    createStars() {
      this.stars = []
      for (let i = 0; i < this.starCount; i++) {
        this.stars.push({
          x: Math.random() * this.width,
          y: Math.random() * this.height,
          radius: Math.random() * (this.starSizeRange[1] - this.starSizeRange[0]) + this.starSizeRange[0],
          vx: Math.random() * this.speed - this.speed/2,
          vy: Math.random() * this.speed + this.speed/2,
          alpha: Math.random(),
          alphaDirection: Math.random() > 0.5 ? 1 : -1
        })
      }
    },
    
    createMeteors() {
      this.meteors = []
      for (let i = 0; i < this.meteorCount; i++) {
        this.meteors.push({
          x: Math.random() * this.width,
          y: Math.random() * this.height/2,
          length: Math.random() * 50 + 50,
          speed: Math.random() * 5 + 5,
          angle: Math.random() * Math.PI/4 + Math.PI/4,
          alpha: 0,
          active: false,
          lastTime: 0
        })
      }
    },
    
    drawStars() {
      this.ctx.save()
      this.stars.forEach(star => {
        // 更新星星位置
        star.x += star.vx
        star.y += star.vy
        
        // 边界检查
        if (star.x < 0 || star.x > this.width) star.vx = -star.vx
        if (star.y < 0 || star.y > this.height) star.vy = -star.vy
        
        // 闪烁效果
        star.alpha += this.twinkleSpeed * star.alphaDirection
        if (star.alpha > 1 || star.alpha < 0.2) {
          star.alphaDirection = -star.alphaDirection
        }
        
        // 绘制星星
        this.ctx.beginPath()
        this.ctx.arc(star.x, star.y, star.radius, 0, Math.PI * 2)
        
        // 星星发光效果
        const glow = this.ctx.createRadialGradient(
          star.x, star.y, 0,
          star.x, star.y, star.radius * 3
        )
        glow.addColorStop(0, `rgba(255, 255, 255, ${star.alpha})`)
        glow.addColorStop(1, 'rgba(0, 0, 0, 0)')
        
        this.ctx.fillStyle = glow
        this.ctx.fill()
      })
      this.ctx.restore()
    },
    
    drawMeteors() {
      const now = Date.now()
      
      this.meteors.forEach(meteor => {
        // 随机激活流星
        if (!meteor.active && now - meteor.lastTime > 5000 + Math.random() * 10000) {
          meteor.active = true
          meteor.alpha = 1
          meteor.x = Math.random() * this.width
          meteor.y = -20
          meteor.lastTime = now
        }
        
        if (meteor.active) {
          // 更新流星位置
          meteor.x += Math.cos(meteor.angle) * meteor.speed
          meteor.y += Math.sin(meteor.angle) * meteor.speed
          
          // 绘制流星
          this.ctx.save()
          this.ctx.beginPath()
          this.ctx.moveTo(meteor.x, meteor.y)
          this.ctx.lineTo(
            meteor.x - Math.cos(meteor.angle) * meteor.length,
            meteor.y - Math.sin(meteor.angle) * meteor.length
          )
          
          // 流星拖尾渐变
          const gradient = this.ctx.createLinearGradient(
            meteor.x, meteor.y,
            meteor.x - Math.cos(meteor.angle) * meteor.length,
            meteor.y - Math.sin(meteor.angle) * meteor.length
          )
          gradient.addColorStop(0, `rgba(255, 255, 255, ${meteor.alpha})`)
          gradient.addColorStop(0.5, `rgba(100, 149, 237, ${meteor.alpha * 0.7})`)
          gradient.addColorStop(1, 'rgba(0, 0, 0, 0)')
          
          this.ctx.strokeStyle = gradient
          this.ctx.lineWidth = 2
          this.ctx.stroke()
          
          // 流星头部光点
          this.ctx.beginPath()
          this.ctx.arc(meteor.x, meteor.y, 2, 0, Math.PI * 2)
          this.ctx.fillStyle = `rgba(255, 255, 255, ${meteor.alpha})`
          this.ctx.fill()
          
          this.ctx.restore()
          
          // 流星淡出
          meteor.alpha -= 0.01
          if (meteor.alpha <= 0 || meteor.y > this.height || meteor.x < 0 || meteor.x > this.width) {
            meteor.active = false
          }
        }
      })
    },
    
    animate() {
      this.animationFrame = requestAnimationFrame(this.animate)
      
      // 清除画布
      this.ctx.fillStyle = this.gradient
      this.ctx.fillRect(0, 0, this.width, this.height)
      
      // 绘制元素
      this.drawStars()
      this.drawMeteors()
    },
    
    handleResize() {
      if (!this.$refs.canvas) return; // 防止组件销毁后触发
      this.width = window.innerWidth
      this.height = window.innerHeight
      this.canvas.width = this.width
      this.canvas.height = this.height
      this.initCanvas()
    }
  }
}
</script>

<style scoped>
.star-background-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  overflow: hidden;
}

canvas {
  display: block;
}
</style>